<template>
	<view class="container">
		<view class="header">
			<text class="title">Demo 2: 下拉刷新与横向滚动</text>
			<button size="mini" @click="goToGreenItem">滚动到绿色块</button>
		</view>

		<!-- 
			refresher-enabled: 开启下拉刷新
			:refresher-triggered: 控制刷新动画的显示/隐藏，true为显示
			@refresherrefresh: 核心！触发刷新时调用此方法
			refresher-default-style="none": 不使用默认的三个点样式，方便完全自定义
		-->
		<scroll-view class="main-scroll" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh">
			<!-- 自定义下拉刷新视图 -->
			<view v-if="isRefreshing" class="custom-refresher">
				<image class="loading-icon" src="/static/loading.gif"></image> <!-- 请准备一个loading.gif图 -->
				<text>正在刷新...</text>
			</view>

			<!-- 横向滚动区域 -->
			<view class="section-title">横向滚动区域</view>
			<!-- 
				scroll-x: 开启横向滚动
				:scroll-into-view: 值应为某子元素id，滚动到该元素
				show-scrollbar: 隐藏横向滚动条
			-->
			<scroll-view class="horizontal-scroll" scroll-x :scroll-into-view="targetItemId" scroll-with-animation
				:show-scrollbar="false">
				<view class="horizontal-item" v-for="item in horizontalList" :key="item.id" :id="item.id"
					@click="handleClick(item.id)" :style="{ backgroundColor: item.color }">
					<text>{{ item.text }}</text>
				</view>
			</scroll-view>

			<!-- 纵向列表内容 -->
			<view class="section-title">纵向列表</view>
			<view v-for="(item, index) in dataList" :key="index" class="list-item">
				<text>数据项 {{ item }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRefreshing: false, // 控制下拉刷新状态
				dataList: ["初始数据1", "初始数据2", "初始数据3", "初始数据4", "初始数据5"],
				horizontalList: [{
						id: 'red-item',
						text: '红色块',
						color: '#F56C6C'
					},
					{
						id: 'orange-item',
						text: '橙色块',
						color: '#E6A23C'
					},
					{
						id: 'yellow-item',
						text: '黄色块',
						color: '#F2D33D'
					},
					{
						id: 'green-item',
						text: '绿色块',
						color: '#67C23A'
					}, // 目标元素
					{
						id: 'blue-item',
						text: '蓝色块',
						color: '#409EFF'
					},
					{
						id: 'purple-item',
						text: '紫色块',
						color: '#9049DE'
					},
				],
				targetItemId: ''
			}
		},
		methods: {
			/**
			 * @refresherrefresh 触发的刷新方法
			 */
			onRefresh() {
				if (this.isRefreshing) return;
				console.log('开始刷新...');
				this.isRefreshing = true;

				// 模拟网络请求
				setTimeout(() => {
					const newData = `新数据 ${new Date().toLocaleTimeString()}`;
					this.dataList.unshift(newData); // 在列表顶部插入新数据

					// 关键：刷新完成后，必须手动把 isRefreshing 设置为 false，收起刷新动画
					this.isRefreshing = false;
					console.log('刷新完成！');
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					});
				}, 1500);
			},

			/**
			 * 滚动到指定横向元素
			 */
			goToGreenItem() {
				this.targetItemId = 'green-item';
				// 小技巧：使用后清空，以便下次还能滚动到同一个id
				setTimeout(() => {
					this.targetItemId = '';
				}, 200);
			},
			handleClick(id) {
				this.targetItemId = id;
			}
		}
	}
</script>

<style>
	/* 通用样式，与上例部分重叠 */
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.main-scroll {
		flex: 1;
		height: 0;
	}

	.list-item {
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section-title {
		padding: 20rpx;
		background-color: #f5f5f5;
		color: #666;
		font-size: 28rpx;
	}

	/* --- 本示例新增样式 --- */
	.custom-refresher {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		color: #666;
	}

	.loading-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.horizontal-scroll {
		/* 这是关键！white-space:nowrap 防止子元素换行 */
		white-space: nowrap;
		width: 100%;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.horizontal-item {
		/* 这是关键！inline-block 使元素在一行内排列 */
		display: inline-block;
		width: 250rpx;
		height: 180rpx;
		margin: 0 15rpx;
		border-radius: 10rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: bold;
	}
</style>